<template>
  <div @click="open" class="border border-gray border-solid rounded-16 relative px-8 py-2">
    <span class="text-13 c-black" v-if="text">{{ text }}</span>
    <span class="text-13" v-else-if="text">{{ placeholder  }}</span>
    <span class="text-13" v-else>{{ '请选择' }}</span>
    <span class="absolute top-4 right-6" v-if="isDown">
      <RectDown color="#999" size="15px" width="12px" />
    </span>
    <span class="absolute top-5 right-6" v-else>
      <RectUp color="#999" size="15px" />
    </span>
  </div>
  <popUp ref="_popUp" :title="placeholder" @confirm="confirm" :columns="popUpColumns" />
</template>

<script setup>
import { RectDown, RectUp } from '@nutui/icons-vue';
import { defineProps, defineEmits } from 'vue';
import popUp from '../popUp/index.vue'
const props = defineProps({
  value: {
    type: [String, Number],
  },
  text: {
    type: [String, Number],
  },
  columns: {
    type: Array,
  },
  placeholder: {
    type: String,
  }
})
const emit = defineEmits(['openPopUp', 'confirm', 'update:value', 'update:text'])
const _popUp = ref('')
const isDown = ref(true)
const selectValue = ref('')
let popUpColumns = ref([])
const open = () => {
  _popUp.value.open(props.value)
  popUpColumns.value = props.columns
}
const confirm = (item) => {
  emit('update:value', item.selectedOptions[0].value)
  emit('update:text', item.selectedOptions[0].text)
  emit('confirm', item.selectedOptions[0].value)
}
</script>

<style lang="scss" scoped>
</style>